<!-- eslint-disable vue/multi-word-component-names -->

<script setup>
import { ref } from 'vue';

const url = ref('');

// 通过props接收提交函数
const props = defineProps({
    handleSubmitter: Function
});

function handleSubmit() {
    props.handleSubmitter(url.value); // 调用父组件传递的函数
}
</script>

<template>
    <div class="container">
        <a-space class="site-input-group-wrapper" direction="horizontal" size="large" align="center">
            <a-input-group compact>
                <a-input v-model:value="url" placeholder="请输入网址链接" style="width: 500px" />
                <a-button @click="handleSubmit" type="primary">Submit</a-button>
                <h3>{{ url }}</h3>
            </a-input-group>
        </a-space>
    </div>

</template>


<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.site-input-group-wrapper {
    width: 100%;
    /* 根据需要调整宽度 */
    max-width: 600px;
    /* 限制最大宽度 */
    border: solid 1px #f8a7a725;
}

.site-input-group-wrapper .site-input-split {
    background-color: #fff;
}

.site-input-group-wrapper .site-input-right {
    border-left-width: 0;
}

.site-input-group-wrapper .site-input-right:hover,
.site-input-group-wrapper .site-input-right:focus {
    border-left-width: 1px;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right {
    border-right-width: 0;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
    border-right-width: 1px;
}

[data-theme='dark'] .site-input-group-wrapper .site-input-split {
    background-color: transparent;
}
</style>